/* Vars definitions */
var formation = '<div id="formationconfig">';
var endDiv = "</div>";
var navList = '<ul id="navlist">';
var endUl = "</ul>";
var formations = new Array("4-4-2","4-3-3","3-5-2","4-5-1");

function changeFormation(id) {

    // should actually post to server for processing
    // when rendering back, highlight in's & out's
    // click on squad -> out
    // click on bench <- in
    // save to persist, or persist on click event?

    existingFormationTitle = document.getElementById("formation").innerHTML;
    existingFormationSplit = existingFormationTitle.split('-');
    newFormation = id.split('-');
    var changingLines = [];
    for(var p=0; p<existingFormationSplit.length; p++){
        if(existingFormationSplit[p] != newFormation[p]){
            changingLines[p] = p+1;
        }
    }

    // read 4-4-2 change to 4-3-3
    // changin lines 2 and 3
    // build from top to bottom, in reverse order: 3 then 2
    if(sizeof(changingLines > 0)){
        var newFormation = formation + navLis;
        for(var i=changingLines.length; i=0; i--) {
            if(typeof(changingLines[i]) != "undefined") {
                // alert(changingLines[i]);
                newFormation += "<li>";
            }
        }
    }

}

